<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<style>
		body{
			font-size:9pt;		
		}		
		div{
			border: 1px solid #999999;
			margin:20px;
			margin-bottom:20px;
		}
		div div{
			border: 1px dotted #CCC;
			font-size:20px;	
		}
		
		#panel {
			width:600px;
			overflow:visible;		
		}
		
	</style>
	<script>
	var NUMBER=0;
	
	var createElem = function(){
		var container = document.getElementById("panel");
		
		setTimeout(function(){
			NUMBER++;
			if(NUMBER < 50){
				var panel = document.createElement("span");
				var pontSize = random();
				panel.innerHTML=NUMBER;
				panel.style.color="#"+(parseInt(Math.random()*0xffffff)).toString(16);
				panel.style.fontSize=pontSize+"px";
				panel.style.display="inline-block";
				container.appendChild(panel);
				createElem();
			}else{
				return;
			}			
		},20);
	}
	
	var random = function(){
		var num = Math.round(Math.random()*10)*10;
		return num;
	}
	window.onload=function(e){
		createElem();
	}
	</script>
</head>
<body>
	<div> 
		<h4>미션2 - 1초에 하나씩 1부터 숫자를 증가시키며 #panel에 추가 시켜 주세요.<br> 단, 폰트 크기( 10px~ 50px)와 색은  랜덤으로 설정해주세요.</h4>
		<div id="panel">
		</div>
	</div>
</body>
</html>